<template>
  <div class="container">
    <el-container>
      <el-header>
        <el-form :model="searchForm" ref="searchForm" size="mini" inline>
          <el-form-item style="margin-right:100px">
            <span>组织架构</span>
            <el-divider direction="vertical"></el-divider>
            <el-dropdown @command="expandHandle" trigger="click">
              <span class="el-dropdown-link">
                {{ currentExpandLabel }}
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  v-for="(v, k) in expandOptions"
                  :key="'exp-' + k"
                  :command="v"
                  >{{ v.label }}</el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>
          </el-form-item>
          <!--  <el-form-item prop="deptName">
            <el-input
              v-model="searchForm.deptName"
              placeholder="组织或者岗位名称"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button size="mini" type="primary" icon="el-icon-search" @click="pageInit"
              >搜索</el-button
            >
          </el-form-item> -->
        </el-form>
      </el-header>
      <el-main>
        <el-table
          :data="tbData"
          ref="tree"
          row-key="deptId"
          :expand-row-keys="expandKeys"
          border
          :height="600"
          size="mini"
        >
          <el-table-column prop="deptName" label="部门层级">
            <template slot-scope="scope">
              <span
                style="font-weight:900"
                v-if="scope.row.category == 2 || scope.row.category == 1"
                >{{ scope.row.deptName }}</span
              >
              <span
                style="font-weight:400"
                v-else-if="scope.row.category == 3"
                >{{ scope.row.deptName }}</span
              >
              <span v-else-if="scope.row.category == 4">{{
                scope.row.deptName
              }}</span>
              <span style="color:#A8A8A8" v-else-if="scope.row.category == 5">{{
                scope.row.deptName
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                type="text"
                @click="addNew(scope.row)"
                v-if="scope.row.category < 5"
                >创建</el-button
              >
              <el-button
                type="text"
                @click="update(scope.row)"
                v-if="scope.row.category > 1"
                >修改</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>

    <el-dialog
      :title="form.title"
      :visible.sync="formOpen"
      width="780px"
      :showClose="false"
      append-to-body
    >
      <el-form
        :model="form"
        ref="form"
        label-width="80px"
        inline
        :disabled="!formEnable"
      >
        <el-form-item label="组织名称" prop="deptName" :rules="rules.deptName">
          <el-input
            v-model="form.deptName"
            class="form-inp"
            clearable
          ></el-input>
        </el-form-item>
        <!-- <el-form-item label="所属类型" prop="category">
          <el-select
            v-model="form.category"
            class="form-inp"
            clearable
            @change="categoryChange"
            :disabled="form.deptId != undefined"
          >
            <el-option
              v-for="(v, k) in cateOptions"
              :key="k"
              :label="v.label"
              :value="v.value"
            ></el-option>
          </el-select>
        </el-form-item> -->
        <!-- <el-form-item
          label="上级菜单"
          prop="parentId"
          :rules="form.category > 2 ? rules.parentId : []"
        >
          <el-cascader
            :disabled="!form.category || form.category < 3"
            v-model="tmpList"
            class="form-inp"
            ref="cascaderHandler"
            :options="casOptions"
            :props="{ checkStrictly: true, value: 'id', label: 'label' }"
            @change="casChange"
            clearable
          ></el-cascader>
        </el-form-item> -->
        <el-form-item label="上级菜单">
          <el-input v-model="form.parentName" disabled></el-input>
        </el-form-item>
        <el-form-item label="排序" prop="orderNum">
          <el-input-number
            class="form-inp"
            v-model="form.orderNum"
            controls-position="right"
            @change="numChange"
            :min="1"
          ></el-input-number>
        </el-form-item>

        <!-- <div v-if="form.category === 5">
          <el-form-item label="岗位补贴" prop="jobAllowance" >
            <el-input v-model="form.jobAllowance" placeholder="请输入价格" :disabled="form.allowanceStatus !== 0">
              <i slot="suffix" style="margin-right: 10px;">元</i>
            </el-input>
          </el-form-item>
          <el-form-item label="补贴状态" prop="allowanceStatus">
            <el-radio-group v-model="form.allowanceStatus">
              <el-radio :label="0">启用</el-radio>
              <el-radio :label="2">停用</el-radio>
            </el-radio-group>
          </el-form-item>
        </div> -->

        <!-- <el-form-item label="岗位状态" prop="status">
          <el-radio-group v-model="form.status">
            <el-radio label="0">启用</el-radio>
            <el-radio label="1">停用</el-radio>
          </el-radio-group>
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click="submit"
          v-if="formEnable"
          :loading="subLoading"
          >确 定</el-button
        >
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { deptTree } from "@/api/system/dept";
import { addDept, updateDept } from "@/api/system/dept.js";
export default {
  data() {
    return {
      searchForm: {},
      formOpen: false,
      subLoading: false,
      formEnable: true,
      form: {
        title: undefined
      },
      rules: [],
      currentExpandLabel: "全部关闭",
      expandOptions: [
        { label: "全部关闭", value: 0 },
        { label: "展开1级", value: 1 },
        { label: "展开2级", value: 2 }
      ],
      isExpand: false,
      expandKeys: [],
      tbData: []
    };
  },
  created() {
    this.pageInit();
  },
  methods: {
    pageInit() {
      this.reset();
      deptTree(this.searchForm.deptName || "").then(res => {
        res.data.map(item => {
          this.tbData[0].children.push(item);
        });
      });
    },
    reset() {
      this.tbData = [
        {
          deptName: "贵阳事业部",
          category: 1,
          deptId: "0",
          children: []
        }
      ];
    },
    // 新增
    addNew(row) {
      this.form.title = "新建部门";
      this.form["parentId"] = row.deptId;
      this.form["parentName"] = row.deptName;
      this.form["category"] = row.category + 1;
      this.formOpen = true;
    },
    update(row) {
      this.form = {
        deptId: row.deptId,
        parentName: row.parentName,
        parentId: row.parentId,
        deptName: row.deptName,
        orderNum: row.orderNum || "1"
      };
      this.form["title"] = "修改";
      this.formOpen = true;
    },
    // 提交
    submit() {
      if (this.form.deptId) {
        this.subLoading = true;
        updateDept(this.form).then(res => {
          this.$message.success(res.msg);
          this.formOpen = false;
          this.subLoading = false;
          this.pageInit();
        });
      } else {
        this.$refs.form.validate(valid => {
          if (valid) {
            this.subLoading = true;
            addDept(this.form).then(res => {
              this.$message.success(res.msg);
              this.formOpen = false;
              this.subLoading = false;
              this.pageInit();
            });
          }
        });
      }
    },
    // 取消
    cancel() {
      this.form = {
        title: undefined
      };
      this.formOpen = false;
    },
    // 排序控件
    numChange(v) {},
    // 折叠操作
    expandHandle(v) {
      this.currentExpandLabel = v.label;
      this.expandKeys = [];
      switch (v.value) {
        case 0:
          this.collapseAll();
          break;
        case 1:
          this.keyPush(this.tbData);
          break;
        case 2:
          this.keyPush(this.tbData);
          let temp = [];
          this.tbData.map(item => {
            temp = temp.concat(item.children);
          });
          this.keyPush(temp);
          break;
      }
    },
    collapseAll() {
      if (this.tbData.length !== 0) {
        const elsopen = this.$el.getElementsByClassName(
          "el-table__expand-icon--expanded"
        );
        if (
          this.$el.getElementsByClassName("el-table__expand-icon--expanded")
        ) {
          for (let i = 0; i < elsopen.length; i++) {
            elsopen[i].click();
          }
        }
      }
    },
    keyPush(arr) {
      for (const td of arr) {
        this.expandKeys.push(String(td.deptId));
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  height: 90vh;
  padding: 15px 0;
}
</style>
